<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      .start {
        width: 30px;
        transition: width 0.5s ease-in;
      }
      .end {
        width: 300px;
      }

     
    </style>
  </head>
  <body>
    <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please
        <a href="#">upgrade your browser</a> to improve your experience.
      </p>
    <![endif]-->
    <input type="text" class="start"  id="tex" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script>
      // console.log( moment().format())

      // 删除树形对象
      // const treeData = [
      //   {
      //     menuName: "测试引用导航1级",
      //     type: "menu",
      //     children: [
      //       {
      //         menuName: "2级",
      //         type: "menu",
      //         children: [
      //           {
      //             menuName: "3级",
      //             type: "menu",
      //             children: [],
      //             menuId: "1651506907302387713",
      //             id: "1651757346161778692",
      //           },
      //         ],
      //         menuId: "1651506847936208897",
      //         id: "1651757346161778691",
      //       },
      //     ],
      //     menuId: "1651506779963318274",
      //     id: "1651757346161778690",
      //   },
      //   {
      //     menuName: "单独1级菜单",
      //     type: "menu",
      //     children: [],
      //     menuId: "1651506988617359361",
      //     id: "1651757346161778693",
      //   },
      //   {
      //     menuName: "引用菜单共2级-1",
      //     type: "menu",
      //     children: [
      //       {
      //         menuName: "引用菜单共2级-2",
      //         type: "menu",
      //         children: [],
      //         menuId: "1651507144834211842",
      //         id: "1651757346161778695",
      //       },
      //     ],
      //     menuId: "1651507088370491393",
      //     id: "1651757346161778694",
      //   },
      // ];


      // const wantDeleteArr = ["1651757346161778692", "1651757346161778695"]

      // const deleteTreeObj = (treeData) => {
      //   treeData.forEach((item, i) => {
      //     console.log(item);
      //     if (wantDeleteArr.includes(item.id)) {
      //       treeData.splice(i, 1);
      //     }
      //     if (item.children && item.children.length) {
      //       deleteTreeObj(item.children);
      //     }
      //   });
      // };

      // deleteTreeObj(treeData);
      // console.log(treeData);

      const idx = document.querySelector('#tex')
      idx.onfocus = function () {
        idx.classList.add('end')
      }
      idx.onblur = function () {
        idx.classList.remove('end')
      }
    </script>
  </body>
</html>
